<template>
  <div  class="homeList-container">
  <van-cell   >
      <div class="componyInfo">
    <div class="com-icon"><img :src="colist['co-img']" alt=""></div>
    <ul class="coInfo">
         <li ><strong>{{ colist.coname }}</strong></li>
         <li><span>{{ colist.slogan }}</span></li>
         <li>
          <van-button v-for="(item , index) in colist.label" :key="index" round>{{ item }}</van-button>
         </li>
     </ul>

      </div>
      <div v-if="type == 1" class="site" >
        <div class="area"><van-icon name="location-o" />
         <span>{{ colist.distance }}</span></div>
        <p>{{ colist['site-co'] }}</p>
      </div>
        <div v-else-if="type == 2" class="sites" >
       <p>{{ colist['site-co'] }}</p>
      </div>
  </van-cell>
  </div>
</template>

<script>
export default {
  props: {
    // 这里用来区别不同的路由
    type: {
      type: [Number, String],
      default: 1
    },
    colist: {
      type: [Object, Array],
      default: null
    }
  },
  data () {
    return {

    }
  },
  created () {
  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style scoped lang="less">
.homeList-container{
  .componyInfo{
      display: flex;
      height: 160px;
  .coInfo{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: normal;
    height: 100%;
    width: 100%;
    padding-left: 20px;
    li span{
          font-size: 4px;
    }
    }
   .com-icon{
       display: flex;
       justify-content: center;
       align-items: center;
       width: 30%;
       background-color: #F9F5F5;
       img{
         width: 100%;
         height: 100%;
       }
   }
   .van-button {
       height: 35px;
       font-size: 8px;
       padding: 10px 15px;
       line-height: 35px;
       margin-right: 20px;
       border-color: #3f51b5;
       color: #3f51b5;
   }
  }
  .site{
    display: flex;
    height: 60px;
    width: 100%;
    .area{
   display: flex;
   width: 26%;
  //  padding: 0px 20px;
  padding-right: 23px;
    box-sizing: border-box ;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: center;
    }
   span{
        font-size: 15px;
        color: #000;
   }
   p{
    width: 70%;
     //超出文字隐藏
overflow: hidden;
//当文本溢出，省略号代替
text-overflow:ellipsis;
//文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
white-space: nowrap;
      margin: 0;
      font-size: 10px;
      color: #b5b2b1;
      line-height: 60px;
   }
  }
  .sites{
      p{
        //超出文字隐藏
overflow: hidden;
//当文本溢出，省略号代替
text-overflow:ellipsis;
//文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
white-space: nowrap;
      margin: 0;
      margin-top: 10px;
      font-size: 10px;
     color: black
   }
  }
  /deep/ .moreco{
      height: 60px;
      display: flex;
      background-color: #fff;
      justify-content: center;
      align-items: center;
      font-size: 25px;
  }
}
</style>
